// 定义的一些通用变量
@box-round                   :8px; 
@box-text-color              :#fff; 
.flex-row-center{
  @apply flex flex-row justify-center items-center;
}
.flex-col-center{
  @apply flex flex-col justify-center items-center;
}
.truncate{
  @apply truncate;
}

.initBorder(@borderRadius,@borderStyle){
  border-radius: @borderRadius;
  border: @borderStyle;
}


.fightStationLabel{
  .flex-row-center;
  .initBorder(@box-round,2px solid #29A9D0);
  width: 185px;
  height: 35px;
  color: @box-text-color;
  font-size: 14px;
  padding: 0 8px;
  background: #29A9D060;

  .fightStationLabelLeft{
    width: 50%;
    text-align: center;
    .truncate;
  }
  .fightStationLabelRight{
    width: 50%;
    text-align: center;
    .truncate;
  }

}

.normalStationLabel{
  .flex-row-center;
  height: 27px;
  background: linear-gradient(0deg, #0D131A 0%, rgba(14,14,14,0.27) 100%);
  border-radius: 4px 4px 0px 0px;
  border-bottom: 3px solid rgba(0,158,158,0.8);

  font-size: 14px;
  font-weight: bold;
  color: @box-text-color;
  .normalStationLabelLeft{
    .truncate;
    padding: 0 15px;
    text-align: center;
  }
  .normalStationLabelRight{
    .truncate;
    padding: 0 15px;
    text-align: center;
  }

}


.jqPointLabel{
  .flex-row-center;
  .initBorder(@box-round,2px solid #F34D51);

  height: 60px;
  font-size: 14px;
  color: @box-text-color;
  background: #F34D5160;

  .jqPointLabelRight{
    @apply flex-1 p-2 flex break-all flex flex-col gap-2 justify-center ;
    height: 95%;
    max-width: 200px;
    overflow: hidden; 
  }
}

.carLabel{
  .flex-row-center;
  .initBorder(@box-round,2px solid #88AB73);

  height: 35px;
  font-size: 14px;
  color: @box-text-color;
  background: #88AB7360;
  padding-top: 1rem;
  padding-bottom: 1rem;

  .carLabelLeft{
    padding-left: 1rem; /* 16px */
    padding-right: 1rem; /* 16px */
  }
  .carLabelRight{
    padding-right: 1rem; /* 16px */
  }
}


.miniStationLabel{
  .flex-row-center;
  height: 27px;
  background: linear-gradient(0deg, #D19209 0%, rgba(209,146,9,0.27) 100%);
  border-radius: 4px 4px 0px 0px;
  border-bottom: 3px solid #D5B20E;

  font-size: 14px;
  font-weight: bold;
  color: @box-text-color;

  .miniStationLabelLeft{
    .truncate;
    padding: 0 10px;
    text-align: center;
  }
  .miniStationLabelRight{
    .truncate;
    padding: 0 10px;
    text-align: center;
  }

}


.peopleLabel{
  .flex-col-center;
  .initBorder(@box-round,0px solid #576F3A);
  background: #576f3ad4;
  font-size: 14px;
  // font-weight: bold;
  color: @box-text-color;

  .peopleLabelTop{
    @apply flex flex-row w-full justify-center items-center;
    border-bottom: 1px solid #c9cbc790;
    padding: 5px 0px;
  }
  .peopleLabelBottom{
    @apply flex flex-row;
    border-bottom: 1px solid #445F1B;
    padding: 5px 0px;
  }

  .peopleLabelLeft{
    .truncate;
    padding: 0 10px;
    text-align: center;
  }
  .peopleLabelRight{
    .truncate;
    padding: 0 10px;
    text-align: center;
  }

}

.linkageLabel{
  .flex-row-center;
  .initBorder(@box-round,0px solid #D5960E);
  background: #D5960E;
  font-size: 14px;
  // font-weight: bold;
  color: @box-text-color;

  .linkageLabelLeft{
    padding: 6px 8px;
    font-size: 20px;
    font-weight: bold;
    line-height: inherit;
    border-right: 1px solid #ffffff90;
  }
  .linkageLabelRight{
    @apply flex flex-col;
    padding: 5px 0px;
  }

  .linkageLabelTop{
    .truncate;
    padding: 2px 10px 5px 10px;
    // text-align: center;
  }
  .linkageLabelBottom{
    .truncate;
    padding: 2px 10px;
    // text-align: center;
  }

}
